<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>隐藏标签属性</title>
	</head>
	<script type="text/javascript" src="jquery-3.1.4.js">
		
	</script>
	<style type="text/css">
		#div1{
			width: 200px;
			height: 200px;
			background: #0000FF;
			border: 1px solid black;
		}
	</style>
	<body>
		<div id="div1">
			
		</div>
		<input type="button" id="div1_button" value="我是jquery的消失div按钮" />
		<input type="button" id="div2_button" value="我是jquery的呈现div按钮" />
		<input type="button" id="div3_button" value="我是jquery的淡出阴影div按钮" />
		<input type="button" id="div4_button" value="我是jquery的淡入阴影div按钮" />
		<input type="button" id="div5_button" value="我是jquery的上拉div按钮" />
		<input type="button" id="div6_button" value="我是jquery的下滑div按钮" />
		
		<script type="text/javascript">
			$("input[type=button]:eq(0)").click(function(){
				// 标签属性消失按钮
				$("#div1").hide();
			});
			$("input[type=button]:eq(1)").click(function(){
				// 标签属性消失按钮
				$("#div1").show();
			});
			$("input[id=div3_button]").click(function(){
				// 淡出效果
				$("#div1").fadeOut();
			});
			$("input[id=div4_button]").click(function(){
				// 淡入效果
				$("#div1").fadeIn();
			});
			$("input[id=div5_button]").click(function(){
				// 上拉效果
				$("#div1").slideUp();
			});
			$("input[id=div6_button]").click(function(){
				// 下滑效果
				$("#div1").slideDown();
			});// 无论上拉还是下滑，皆为一层标签的移动，即example 上拉，如果下方还有一个div就会上移占据滑动后的位置
			
		</script>
	</body>
</html>
